<template>
  <div class="con">

    <h1>张三外卖</h1>
    <van-tabs v-model="active" animated @click="goto">
      <van-tab
        v-for="(item, index) in type"
        :title="item + '登录'"
        :key="index"
      >
        <router-view ></router-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入需要的vant组件并注册
import Vue from "vue";
import { Tabbar, TabbarItem, Tabs, Tab } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Tabs);
Vue.use(Tab);

export default {
  data() {
    return {
      // 默认选中第一个选项卡
      active: 0,
      type: ["密码", "短信"],
      urls: ["/login/pwd", "/login/sms"],
    };
  },
  methods: {
    goto(name, title) {
      // console.log(name,title);
      let url = this.urls[name];
      this.$router.push(url);
    },
  },
};
</script>

<style scoped>
.con img {
  width: 100%;
  height: 100px;
}
.van-tab {
  font-size: 20px;
  color: blue;
}
h1{
  color:#03a774;
  font-size:70px;
  text-align: center;
}
</style>